<template>
	<view class="my-modal-verify">
		<my-modal title="验证身份" :value="showPopup" @input="onInput" @confirm="onConfirm">
			<view class="form-box">
				<uni-forms ref="form" :modelValue="form" :rules="rules" label-position="top">
					<uni-forms-item required label="姓名" name="name">
						<uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item required label="身份证号" name="idCard">
						<uni-easyinput type="idcard" v-model="form.idCard" placeholder="请输入身份证号" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<u-button type="success" :custom-style="customStyle" plain size="medium" slot="left"
				@click="$emit('click-verify')">
				提交新身份
			</u-button>
		</my-modal>
	</view>
</template>

<script>
	export default {
		name: "my-modal-verify",
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value: {
				handler(nVal) {
					this.showPopup = nVal
				},
				immediate: true
			}
		},
		data() {
			return {
				showPopup: false,
				customStyle: {
					padding: '0 40rpx'
				},
				form: {
					name: "",
					idCard: ""
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					idCard: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号',
							},
							{
								pattern: "/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/",
								errorMessage: "请输入正确身份证"
							},
						]
					}
				},
			};
		},
		mounted() {
			// this.$refs.form.setRules(this.rules);

			// setTimeout(() => {
			// 	console.log(this.$refs.form);
			// }, 2000)
		},
		methods: {
			onInput(val) {
				this.showPopup = val
				this.$emit('input', val)
				if (!val) {
					this.$refs.form.resetFields()
				} else {
					this.$nextTick(() => {

						this.$refs.form.setRules(this.rules)
					})
				}
			},
			onConfirm() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$emit('confirm', this.form)
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 $uni-spacing-row-lg;
	}
</style>
